<template>
	<view>
		<!-- 我的关注 -->
		<!-- 单人 -->

		<uni-list>
			<view v-for="item in msgList">
				<uni-list :border="true">

					<!-- 头像显示圆点 -->
					<uni-list-chat :title="item.name" :avatar="item.avatar" :note="item.note" :time="item.time"
						badge-positon="left" badge-text="dot" link
						:to="'/pages/message/chatPage/chatPage?id='+ item.id"></uni-list-chat>

				</uni-list>
			</view>
		</uni-list>

		<!-- 群聊 -->

		<uni-list>
			<uni-list :border="true" v-for="(item,index) in grouChatList" :key="index">
				<!-- 自定义右侧内容 -->
				<uni-list-chat :title="item.name" :avatar-list="item.avatarList" :note="item.note" :time="item.time"
					badge-positon="left" badge-text="dot">

				</uni-list-chat>
			</uni-list>
		</uni-list>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 消息列表
				msgList: [{
					id: 1,
					avatar: "https://ts2.cn.mm.bing.net/th?id=OIP-C.DyeqSb6pZeA1r41xKttMywHaDf&w=350&h=164&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
					name: "莫奕",
					time: "2020-02-02 20:20",
					note: "只要有人愿意改变，事情总会发生变化。"
				}, {
					id: 2,
					avatar: "https://pic2.zhimg.com/80/v2-044bd043e0ee05e767431742f7a36999_1440w.webp",
					name: "charlie",
					time: "2020-02-02 20:20",
					note: "亲爱的未婚妻，休息了吗？"
				}, {
					id: 3,
					avatar: "https://ts1.cn.mm.bing.net/th?id=OIP-C.qOtrH6g3zNEAqwwPEnDeHQHaQB&w=161&h=350&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
					name: "陆景和",
					time: "2020-02-02 20:20",
					note: "姐姐"
				}, {
					id: 4,
					avatar: "https://picx.zhimg.com/80/v2-7ae9a55620839c8ae98125e7d5f6961a_1440w.webp?source=1def8aca",
					name: "Serial",
					time: "2020-02-02 20:20",
					note: "笨鸟，要睡觉了"
				}],
				// 消息头像
				grouChatList: [{
					id: 1,
					name: "健康护卫队",
					note: "黎深：据我观察她需要休息了。",
					time: "2024-03-10 15：56",
					avatarList: [{
						id: 1,
						url: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.DyeqSb6pZeA1r41xKttMywHaDf&w=350&h=164&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2'
					}, {
						id: 2,
						url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.fecKVOEAn_3knlb4Fk0ysAHaIJ&w=142&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2'
					}, {
						id: 3,
						url: 'https://pic2.zhimg.com/80/v2-044bd043e0ee05e767431742f7a36999_1440w.webp'
					}]
				}, {
					id: 2,
					name: "我有钱",
					note: "陆景和：15亿",
					time: "2024-03-10 15：56",
					avatarList: [{
						id: 1,
						url: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.DyeqSb6pZeA1r41xKttMywHaDf&w=350&h=164&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2'
					}, {
						id: 2,
						url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.fecKVOEAn_3knlb4Fk0ysAHaIJ&w=142&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2'
					}, {
						id: 3,
						url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.qOtrH6g3zNEAqwwPEnDeHQHaQB&w=161&h=350&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2'
					}, {
						id: 4,
						url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.8gv4pUZbXcCIg5R5l-7MkgHaJy&w=116&h=150&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2'
					}]
				}]

			};
		},
		method: {
			toChatPage(id) {
				console.log("sdffa")
				uni.navigateTo({
					url: '/pages/message/chatPage/chatPage' + '?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	// 列表

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
</style>